<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    		xmlns:ui="http://java.sun.com/jsf/facelets"
	  			xmlns:h="http://java.sun.com/jsf/html"
	  			xmlns:f="http://java.sun.com/jsf/core"
	  			xmlns:s="http://jboss.com/products/seam/taglib"
				xmlns:a4j="http://richfaces.org/a4j"
				xmlns:a="http://richfaces.org/a4j"
				xmlns:rich="http://richfaces.org/rich"
				template="template.xhtml">


<ui:define name="content">
	<div id="userpanel">
		<h1>User bets:</h1>
		<rich:tabPanel switchType="client">
			<rich:tab label="All slips">
				<h:form>
					<a:commandButton id="findSlips" value="View all the slips" action="#{userSlips.findBettingSlips}" reRender="searchResults"/>
					&#160;
					<a:status>
						<f:facet name="start">
							<h:graphicImage value="/img/spinner.gif"/>
						</f:facet>
					</a:status>
				</h:form>
				<br />
				<a:form>
					<a:outputPanel id="searchResults">
						<h:outputText value="No betting slips found" rendered="#{slips != null and slips.rowCount==0}"/>
						<rich:dataTable id="slips" value="#{slips}" var="slip" rendered="#{slips.rowCount>0}"
						  onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
				          onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
							<rich:column>
								<f:facet name="header">ID</f:facet>
								#{slip.id}
							</rich:column>
							<rich:column>
								<f:facet name="header">Date</f:facet>
								#{slip.creationDate}
							</rich:column>
							<rich:column>
								<f:facet name="header">Number of bets</f:facet>
								#{slip.bets.size}
							</rich:column>												
							<rich:column>
								<f:facet name="header">Money</f:facet>
								#{slip.money}
							</rich:column>						
							<rich:column>
								<f:facet name="header">Details</f:facet>
								<a:commandLink value="Show details" action="#{betsFromSlip.selectBettingSlip(slip)}" 
								   linkStyle="button" reRender="slipDetailsResult"/>							
							</rich:column>
						</rich:dataTable>
					</a:outputPanel>
					<br />
					
					<a:outputPanel id="slipDetailsResult">
						<!--<rich:dataTable id="slipDetails" value="#{bets}" var="bet" rendered="#{bets.rowCount>0}"
						  onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
				          onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
							<rich:column>
								<f:facet name="header">ID</f:facet>
								#{bet.id}
							</rich:column>
						</rich:dataTable>-->
						<rich:panel rendered="#{bets.rowCount>0}">
							<f:facet name="header">
								<h:outputText value="Bets on the slip"></h:outputText>
							</f:facet>
							<h:form>
							<rich:dataGrid value="#{bets}" var="bet" columns="3" elements="12">
								<rich:panel>
									<f:facet name="header">
										<h:outputText value="Bet id: #{bet.id}"></h:outputText>
									</f:facet>
									<h:panelGrid columns="2">									
										<h:outputText value="Your choice:" styleClass="label"></h:outputText>
										<h:outputText value="#{bet.winner.name}" />
										<h:outputText value="Open:" styleClass="label"></h:outputText>
										<h:outputText value="yes" styleClass="green" rendered="#{bet.isClosed() == true}"/>
										<h:outputText value="no" styleClass="red" rendered="#{bet.isClosed() == false}"/>
										<h:outputText value="Correct:" styleClass="label"></h:outputText>
										<h:outputText value="no" styleClass="red" rendered="#{bet.isWinning() == false}"/>
										<h:outputText value="yes" styleClass="green" rendered="#{bet.isWinning() == true}"/>
										<h:outputText value="Participants:" styleClass="label"></h:outputText>
										<rich:dataTable value="#{participants}" var="participant" rendered="#{participants.rowCount>0}" 
										  onRowMouseOver="this.style.backgroundColor='#F1F1F1'" 
										  onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
											<rich:column>
												#{participant.name}
											</rich:column>
										</rich:dataTable>									
									</h:panelGrid>
								</rich:panel>
								<f:facet name="footer">
									<rich:datascroller></rich:datascroller>
								</f:facet>
							</rich:dataGrid>
							</h:form>
						</rich:panel>
					</a:outputPanel>
				</a:form>
			</rich:tab>
			<rich:tab label="View by Date">
				<div class="entry errors">
					<h:messages globalOnly="true"/>
				</div>
				<h:form>
					<h:panelGrid columns="4">
						<ui:define name="label">Begin Date:</ui:define>
							<rich:calendar value="#{userSlips.beginDate}"
							required="true" datePattern="MM/dd/yyyy" event="onblur" />
						<ui:define name="label">End Date:</ui:define>
							<rich:calendar value="#{userSlips.endDate}"
							required="true" datePattern="MM/dd/yyyy" event="onblur" />
					</h:panelGrid>
					<a:commandButton id="findSlips" value="View slips" action="#{userSlips.findByDate}" reRender="searchResults2"/>				
				</h:form>	
				<a:form>
					<a:outputPanel id="searchResults2">
						<h:outputText value="No betting slips found" rendered="#{slips != null and slips.rowCount==0}"/>
						<rich:dataTable id="slips2" value="#{slips}" var="slip" rendered="#{slips.rowCount>0}"
						  onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
				          onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
							<rich:column>
								<f:facet name="header">ID</f:facet>
								#{slip.id}
							</rich:column>
							<rich:column>
								<f:facet name="header">Date</f:facet>
								#{slip.creationDate}
							</rich:column>
							<rich:column>
								<f:facet name="header">Number of bets</f:facet>
								#{slip.bets.size}
							</rich:column>												
							<rich:column>
								<f:facet name="header">Money</f:facet>
								#{slip.money}
							</rich:column>						
							<rich:column>
								<f:facet name="header">Details</f:facet>
								<s:link value="Show details" action="#{betsFromSlip.selectBettingSlip(slip)}" 
								   linkStyle="button" reRender="slipDetailsResult"/>
							</rich:column>
						</rich:dataTable>
					</a:outputPanel>					
					<br />
					<a:outputPanel id="slipDetailsResult2">
						<!--<rich:dataTable id="slipDetails" value="#{bets}" var="bet" rendered="#{bets.rowCount>0}"
						  onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
				          onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
							<rich:column>
								<f:facet name="header">ID</f:facet>
								#{bet.id}
							</rich:column>
						</rich:dataTable>-->
						<rich:panel rendered="#{bets.rowCount>0}">
							<f:facet name="header">
								<h:outputText value="Bets on the slip"></h:outputText>
							</f:facet>
							<h:form>
							<rich:dataGrid value="#{bets}" var="bet" columns="3" elements="12">
								<rich:panel>
									<f:facet name="header">
										<h:outputText value="Bet id: #{bet.id}"></h:outputText>
									</f:facet>
									<h:panelGrid columns="2">									
										<h:outputText value="Your choice:" styleClass="label"></h:outputText>
										<h:outputText value="#{bet.winner.name}" />
										<h:outputText value="Open:" styleClass="label"></h:outputText>
										<h:outputText value="yes" styleClass="green" rendered="#{bet.isClosed() == true}"/>
										<h:outputText value="no" styleClass="red" rendered="#{bet.isClosed() == false}"/>
										<h:outputText value="Correct:" styleClass="label"></h:outputText>
										<h:outputText value="no" styleClass="red" rendered="#{bet.isWinning() == false}"/>
										<h:outputText value="yes" styleClass="green" rendered="#{bet.isWinning() == true}"/>
										<h:outputText value="Participants:" styleClass="label"></h:outputText>
										<rich:dataTable value="#{participants}" var="participant" rendered="#{participants.rowCount>0}" 
										  onRowMouseOver="this.style.backgroundColor='#F1F1F1'" 
										  onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
											<rich:column>
												#{participant.name}
											</rich:column>
										</rich:dataTable>									
									</h:panelGrid>
								</rich:panel>
								<f:facet name="footer">
									<rich:datascroller></rich:datascroller>
								</f:facet>
							</rich:dataGrid>
							</h:form>
						</rich:panel>
					</a:outputPanel>
				</a:form>
			</rich:tab>			
		</rich:tabPanel>		
	</div>
	<br />	
</ui:define>

<ui:define name="navigation">
	<div id="userpanelLeft">
		<h1>Actions:</h1>
		<div class="userAction">
			<s:link id="chgpwd" view="/changepwd.xhtml" value="change password" propagation="none"/>
			<br />
			<s:link id="chgdata" view="/changeUserData.xhtml" value="change user data" propagation="none"/>
			<br />
			<s:link id="bets" view="/user_panel.xhtml" value="view my bets" propagation="none"/>
		</div>
	</div>
</ui:define>

<ui:define name="extra">
	<div id="userpanel">
		<h1>Account info:</h1>
		<p>login: <span class="accountInfo"> #{user.loginName}</span></p>
		<p>email: <span class="accountInfo">#{user.email}</span></p>
		<p>first name: <span class="accountInfo">#{user.firstName}</span></p>
		<p>last name: <span class="accountInfo">#{user.surname}</span></p>
		<p>last visit: <span class="accountInfo">#{user.lastVisitDate}</span></p>
		<p>balance: <span class="accountInfo">#{user.balance}</span></p>
	</div>
</ui:define>

</ui:composition>